<template>
  <div class="box">
    折线图
    <div class="box-title">
      <span class="title">未来七天游客数量折线图</span>
      <img src="../../images/dataScreen-title.png" />
    </div>
    <div class="line-chart" ref="lineRef"></div>
  </div>
</template>

<script setup lang="ts" name="line">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

const lineRef = ref()
onMounted(() => {
  initLineChart()
})

const initLineChart = () => {
  const lineChart = echarts.init(lineRef.value)
  lineChart.setOption({
    title: {
      text: '游客数量趋势折线图',
    },
    grid: {
      left: 20,
      right: 30,
      top: 20,
      bottom: 50,
    },
    xAxis: {
      type: 'category',
      data: ['5/21', '5/22', '5/23', '5/24', '5/25', '5/26', '5/27'],
      boundaryGap: false,
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
      //轴线设置
      axisLine: {
        show: true,
      },
      //刻度设置
      axisTick: {
        show: true,
      },
    },
    series: [
      {
        data: [150, 430, 224, 118, 635, 147, 360],
        type: 'line',
        //平滑曲线
        smooth: true,
        label: {
          show: true,
          position: 'top',
          color: '#fff',
        },
        //折线图区域填充颜色
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'red', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'blue', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  })
}
</script>

<style scoped lang="scss">
.box {
  width: 97%;
  height: 100%;
  background: url('../../images/dataScreen-main-lb.png') no-repeat;
  background-size: 100% 100%;
  margin: 20px 20px;
  .box-title {
    display: flex;
    flex-direction: column;

    .title {
      font-size: 20px;
      color: #fff;
    }
    img {
      margin-top: 7px;
      width: 68px;
      height: 7px;
    }
  }
  .line-chart {
    width: 100%;
    height: 100%;
  }
}
</style>
